<%include ../includes/header.html %>
    <section class="content-header">
      <h1>
        初级教程
        <small>第1章 开启Threejs之旅(二)</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Junior</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">

    </section>
    <!-- /.content -->
<%include ../includes/footer.html %>
<script>
  $(function(){
    var scene = new THREE.Scene();
    
    var camera = new THREE.PerspectiveCamera(75, $('.content').width()/$('.content').height(), 0.1, 1000);
    
    var renderer = new THREE.WebGLRenderer();
    
    renderer.setSize($('.content').width(), $('.content').height());
    $('.content').append(renderer.domElement);
    var geometry = new THREE.CubeGeometry(100,100,100);
    var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    material.opacity = 0.5;
    material.transparent = true;
    material.visible = true;
    material.side = THREE.DoubleSide;
    var cube = new THREE.Mesh(geometry, material); 
    scene.add(cube);
    camera.position.x = 200;
    camera.position.y = 200;
    camera.position.z = 300;
    camera.lookAt(0,0,0)
    function render() {
        requestAnimationFrame(render);
        // cube.rotation.x += 0.1;
        // cube.rotation.y += 0.1;
        renderer.render(scene, camera);
    }
    render();
  })
</script>
